<!--
* @Description: login.vue
* @Author: 王燕欣
* @Date: 2024-09-27 10:09
-->

<template>
  <div class="public_container">
    <van-form @submit="onSubmitLogin">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-button round block type="info" @click="testClick">测试</van-button>
    <van-button round block type="info" class="ku_margin_top_15" @click="showLoadingClick">加载动画</van-button>

  </div>
</template>

<script>
import Cookies from "js-cookie";
import { Notify } from "vant";
import { encrypt } from "@/utils/jsencrypt";
import { loginApi } from "@/api/login";
import FlutterBridge from "@/utils/FlutterBridge";
import $store from '@/store'

export default {
  name: "loginPage",
  components: {},
  props: {},

  data() {
    return {
      username: "admin",
      password: "123456",
    };
  },
  watch: {
    '$store.state.user.token': {
      handler(newVal, oldVal) {
        console.log('watch--监听-newVal--->store.token---', newVal);
        console.log('watch--监听--old--->store.token---', oldVal);
        if(newVal){
           this.$router.push("realtime"); // 跳转到gis页面
        }
      },
      deep: true, //  深度监听
      immediate: true, // 立即执行
    },
  },
  computed() {
    FlutterBridge.RequestFlutterBridge('getTokenFromFlutter');// 从flutter获取token
  },
  mounted() {
    window.FlutterBridgeCallback = FlutterBridge.FlutterBridgeCallback;
  },

  methods: {
    /**
     * @Description: 用户登录
     * @Author: 王燕欣
     * @Date: 2024-09-27 10:13
     */
    async onSubmitLogin() {
      const prames = {
        password: encrypt(this.password),
        username: this.username,
      };
      await loginApi(prames).then((res) => {
        console.log("登录接口------>", res);
        if (res.code === 200 && res.data) {
          let resData = res.data;
          Cookies.set("TokenHead", resData.tokenHead);
          Cookies.set("Token", resData.token);
          Cookies.set("ExpiresIn", resData.expiresIn);
          //   Cookies.set("sysInfo", JSON.stringify(resData.sysInfo));
          this.$router.push("realtime"); // 跳转到gis页面
        } else {
          Notify({ type: "danger", message: res.message });
        }
      });
    },

    /**
    * @Description: 展开 showLoading
    * @Author: 王燕欣
    * @Date: 2024-10-14 18:29
    */
    showLoadingClick() {
      FlutterBridge.RequestFlutterBridge('showLoading');// 开启加载动画
      setTimeout(() => {
        FlutterBridge.RequestFlutterBridge('closeLoading');// 开启加载动画
      }, 3000)
    },

    /**
     * @Description: 测试
     * @Author: 王燕欣
     * @Date: 2024-09-30 11:31
     */
    testClick() {
      // this.$router.push("realtime"); // 跳转到gis页面
      $store.commit('SET_TOKEN', new Date().getTime());
      


      // var str = window.navigator.userAgent;
      // if (str.includes("FlutterBridge")) {
      //   let cc = window.FlutterBridge.postMessage(
      //     JSON.stringify({
      //       method: "getTokenFromFlutter",
      //       data: "data"
      //     }),
      //   );
      //   console.log("sssssss----5->", cc);
      // } else {
      //   console.log("没有获取到");
      // }
    },
  },

};
</script>
<style lang="sass" scoped>
</style>
